<template>
  <div>
    <div>
      <van-tabs :active="active" custom-class="tabs" @change="onChange">
        <van-tab title="砍价中"></van-tab>
        <van-tab title="砍价成功"></van-tab>
        <van-tab title="砍价失败"></van-tab>
      </van-tabs>

      <div style="margin-top:5px;">
        <div v-for="(v,i) in orders" :key="i">
          <div
            style="width: 100%;position:relative;height:100px;margin-bottom:5px;background:white;"
            @click="handleDetail(v)"
          >
            <img
              style="width:100px;height:100px;position:absolute;left:0;top:0;"
              :src="v.bargain.product_picture_url"
            >
            <p
              style="position:absolute;left:100px;top:0;"
            >【{{v.bargain.title}}】{{v.bargain.product_name}}</p>
            <p
              style="position:absolute;left:110px;bottom:5px;color:red;"
              v-if="v.order.bargain_status=='process'"
            >已砍{{v.order.discount_amount/100}}元</p>
            <p
              style="position:absolute;left:110px;bottom:5px;color:red;"
              v-else
            >价格{{v.bargain.price/100}}元</p>
            <div
              v-if="v.order.bargain_status=='process'"
              style="position: absolute;bottom: 5px;right: 10px;color:white;border-radius: 5px;background-color:red;text-align:center;width:100px;height:30px;line-height:30px;vertical-align:middle;font-size:14px;"
            >继续砍价</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatTime } from "@/utils/index";
import api from "@/utils/api";
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      active: 0,
      orders: [],
      search: { page: 1, limit: 5 }
    };
  },
  computed: {
    ...mapGetters(["user"])
  },
  methods: {
    log(title, data) {
      console.log("kanjia_record", title, data);
    },
    fetchOrder() {
      let self = this;
      let status =
        this.active == 0 ? "process" : this.active == 1 ? "success" : "fail";
      this.search.status = status;
      api.findBargainOrder(this.search).then(res => {
        if (res.code == 0 && res.data) {
          res.data.forEach(v => {
            self.orders.push(v);
          });
          self.orders = JSON.parse(JSON.stringify(self.orders));
          self.log("orders", self.orders);
        }
      });
    },
    onChange(event) {
      this.active = event.mp.detail.index;
      this.orders = [];
      this.search.page = 1;
      this.fetchOrder();
    },
    handleDetail(row) {
      wx.navigateTo({ url: "kanjia_detail?order_id=" + row.order.id });
    }
  },
  beforeMount() {
    this.search.user_id = this.user.id;
  },
  mounted() {
    this.fetchOrder();
  },
  onLoad(param) {
    this.log("onLoad", param);
    if (param && param.active) {
      this.active = param.active;
    }
  },
  onUnload() {
    this.log('onUnLoad',)
    this.orders = [];
  },
};
</script>

<style>
page {
  background: #f1f3f8;
}
.Banner {
  height: 150px;
  width: 100%;
  margin-bottom: -5px;
}
</style>
